﻿/*taken from https://github.com/Wikiki/bulma-checkradio/blob/master/src/sass/index.sass */

$checkbox-radius: $radius !default;
$checkbox-border: .1rem solid $grey-lighter !default;
$checkbox-block-background: $white-ter !default;
$checkbox-checked-width: .1rem !default;
$checkradio-focus: 1px dotted $grey-light !default;
$checkradio-top-offset: 0rem !default;

@mixin checkbox-size($size) {
    $newSize: $size * 1.5;
    $height: $newSize / 2.5;
    $width: $newSize / 4;

    + label {
        font-size: $size;
        // line-height: $newSize
        padding-left: $size * 2;

        &::before,
        &:before {
            width: $newSize;
            height: $newSize;
        }

        &::after,
        &:after {
            width: $width;
            height: $height;
            top: ( ( $newSize / 2 ) - ( $height / 2 ) ) * 0.9;
            left: $height;
        }
    }

    &.is-block {
        + label {
            &::before,
            &:before {
                width: 1.25 * $size;
                height: 1.25 * $size;
                left: .175rem;
                top: .175rem;
            }

            &::after,
            &:after {
                top: .2rem + $size * 0.125;
                left: .2rem + $size * 0.45;
            }
        }
    }

    &.is-rtl {
        + label {
            padding-left: 0;
            padding-right: $size * 2;

            &::after,
            &:after {
                left: auto;
                right: $height;
            }
        }
    }
}

@mixin radio-size($size) {
    $newSize: $size * 1.5;
    $height: $newSize;
    $width: $newSize;

    + label {
        font-size: $size;
        line-height: $newSize;
        padding-left: $size * 2;

        &::before,
        &:before,
        &::after,
        &:after {
            width: $width;
            height: $height;
        }
    }

    &.is-rtl {
        + label {
            padding-right: $size * 2;
        }
    }
}

.is-checkradio[type="radio"],
.is-checkradio[type="checkbox"] {
    outline: 0;
    user-select: none;
    display: inline-block;
    position: absolute;
    opacity: 0;

    + label {
        position: relative;
        display: initial;
        cursor: pointer;
        vertical-align: middle;
        margin: .5em;
        padding: .2rem .5rem .2rem 0;
        border-radius: $checkbox-radius;

        &:first-of-type {
            margin-left: 0;
        }

        &:hover {
            &::before,
            &:before {
                animation-duration: 0.4s;
                animation-fill-mode: both;
                animation-name: hover-color;
            }
        }

        &::before,
        &:before {
            position: absolute;
            left: 0;
            top: $checkradio-top-offset;
            content: '';
            border: $checkbox-border;
        }

        &::after,
        &:after {
            position: absolute;
            display: none;
            content: '';
            top: $checkradio-top-offset;
        }
    }

    &.is-rtl {
        + label {
            margin-right: 0rem;
            margin-left: 0.5rem;

            &::before,
            &:before {
                left: auto;
                right: 0;
            }
        }
    }

    &:focus {
        + label {
            &::before,
            &:before {
                outline: $checkradio-focus;
            }
        }
    }

    &:hover:not([disabled]) {
        + label {
            &::before,
            &:before {
                border-color: $primary !important;
            }
        }
    }

    &:checked {
        + label {
            &::before,
            &:before {
                border: $checkbox-border;
            }
        }

        &[disabled] {
            cursor: not-allowed;

            + label {
                opacity: 0.5;
            }
        }

        + label {
            &::before,
            &:before {
                animation-name: none;
            }

            &::after,
            &:after {
                display: inline-block;
            }
        }
    }

    &[disabled] {
        cursor: not-allowed;

        + label {
            opacity: 0.5;
            cursor: not-allowed;

            &:hover,
            &:before,
            &::before,
            &::after,
            &:after {
                cursor: not-allowed;
            }
        }

        &:hover {
            cursor: not-allowed;

            &::before,
            &:before {
                animation-name: none;
            }
        }

        &::before,
        &:before {
            cursor: not-allowed;
        }

        &::after,
        &:after {
            cursor: not-allowed;
        }
    }

    &.has-no-border {
        + label {
            &::before,
            &:before {
                border: none !important;
            }
        }
    }

    &.is-block {
        display: none !important;

        + label {
            width: 100% !important;
            background: $checkbox-block-background;
            color: findColorInvert( $checkbox-block-background );
            padding-right: .75em;
        }

        &:hover:not([disabled]) {
            + label {
                background: darken($checkbox-block-background, 5%);
            }
        }
    }
}

.is-checkradio[type="checkbox"] {
    + label {
        &::before,
        &:before {
            border-radius: $checkbox-radius;
        }

        &::after,
        &:after {
            box-sizing: border-box;
            transform: translateY($checkradio-top-offset) rotate(45deg);
            border-width: $checkbox-checked-width;
            border-style: solid;
            border-color: $primary;
            border-top: 0;
            border-left: 0;
        }
    }

    &.is-circle {
        + label {
            &::before,
            &:before {
                border-radius: 50%;
            }
        }
    }

    @include checkbox-size($size-normal);

    &.is-extra-small {
        @include checkbox-size($size-extra-small);
    }

    &.is-small {
        @include checkbox-size($size-small);
    }

    &.is-medium {
        @include checkbox-size($size-medium);
    }

    &.is-large {
        @include checkbox-size($size-large);
    }

    &.is-extra-large {
        @include checkbox-size($size-extra-large);
    }

    @each $name, $value in $theme-colors {
        $color: $value;

        &.is-#{$name} {
            &.has-background-color {
                + label {
                    &::before,
                    &:before {
                        border-color: transparent !important;
                        background-color: $color !important;
                    }
                }
            }

            &:hover:not([disabled]) {
                + label {
                    &::before,
                    &:before {
                        border-color: $color !important;
                    }
                }
            }

            &:checked {
                + label {
                    &::after,
                    &:after {
                        border-color: $color !important;
                    }
                }

                &.has-background-color {
                    + label {
                        &::before,
                        &:before {
                            border-color: transparent !important;
                            background-color: $color !important;
                        }

                        &::after,
                        &:after {
                            /*border-color: $color-invert !important;*/
                            background-color: $color !important;
                        }
                    }
                }
            }

            &.is-block {
                &:hover:not([disabled]) {
                    + label {
                        &::after,
                        &:after,
                        &::before,
                        &:before {
                            border-color: $color !important;
                        }
                    }
                }

                &:checked {
                    + label {
                        /*color: $color-invert;*/
                        border-color: $color !important;
                        background: $color;

                        &::after,
                        &:after {
                            /*border-color: $color-invert !important;*/
                        }
                    }

                    &:hover:not([disabled]) {
                        + label {
                            background: darken($color, 5%);

                            &::after,
                            &:after,
                            &::before,
                            &:before {
                                /*border-color: darken($color-invert, 5%) !important;*/
                            }
                        }
                    }
                }
            }
        }
    }

    &:indeterminate {
        + label {
            &::after,
            &:after {
                display: inline-block;
                transform: rotate(90deg);
                border-bottom: none;
            }
        }

        @each $name, $value in $theme-colors {
            $color: $value;

            &.is-#{$name} {
                + label {
                    &::after,
                    &:after {
                        border-color: $color;
                    }
                }
            }
        }
    }
}

.is-checkradio[type="radio"] {
    + label {
        &::before,
        &:before {
            border-radius: 50%;
        }

        &::after,
        &:after {
            border-radius: 50%;
            background: $primary;
            left: 0;
            transform: scale(0.5);
        }
    }

    &:checked {
        &.has-background-color {
            + label {
                &::before,
                &:before {
                    border-color: $text !important;
                    background-color: $text !important;
                }

                &::after,
                &:after {
                    border-color: $text !important;
                    background-color: $text !important;
                }
            }
        }
    }

    &.is-rtl {
        + label {
            padding-left: 0;

            &::after,
            &:after {
                left: auto;
                right: 0;
            }
        }
    }

    @include radio-size($size-normal);

    &.is-extra-small {
        @include radio-size($size-extra-small);
    }

    &.is-small {
        @include radio-size($size-small);
    }

    &.is-medium {
        @include radio-size($size-medium);
    }

    &.is-large {
        @include radio-size($size-large);
    }

    &.is-extra-large {
        @include radio-size($size-extra-large);
    }

    @each $name, $value in $theme-colors {
        $color: $value;

        &.is-#{$name} {
            &.has-background-color {
                + label {
                    &::before,
                    &:before {
                        border-color: $color !important;
                        background-color: $color !important;
                    }
                }
            }

            &:hover:not([disabled]) {
                + label {
                    &::before,
                    &:before {
                        border-color: $color !important;
                    }
                }
            }

            &:checked {
                + label {
                    &::after,
                    &:after {
                        border-color: $color !important;
                        background-color: $color !important;
                    }
                }

                &.has-background-color {
                    + label {
                        &::before,
                        &:before {
                            border-color: $color !important;
                            background-color: $color !important;
                        }

                        &::after,
                        &:after {
                            /* border-color: $color-invert !important;
                            background-color: $color-invert !important;*/
                        }
                    }
                }
            }
        }
    }
}
